<template>
	<fx-list-filter @on-enter="onSearchClick">
		<template slot="row-1">
			<el-form-item label="业务日期：" label-width="110px">
				<el-date-picker
					ref="busDate"
					v-model="busDate"
					value-format="yyyy-MM-dd"
					type="date"
					placeholder="选择日期"
					:clearable="false"
					class="form-input"
				></el-date-picker>
			</el-form-item>
			<el-form-item label="显示方式：" label-width="110px">
				<w-select v-model="autoQueryType" collapseTags :optionlist='autoQueryTypeList' class="form-input"></w-select>
			</el-form-item>
      <el-form-item label="车间：" label-width="110px">
				<w-select v-model="carRoomIds" clearable
				collapseTags :optionlist='workshopList' class="form-input"
				@change="changeCarRoom"></w-select>
			</el-form-item>
		</template>
    <template slot="row-2">
			<el-form-item label="产线：" label-width="110px">
				<w-select v-model="productionLineIds" clearable collapseTags
				:optionlist='productionLineList' class="form-input"
				@change="changeProductionLine"></w-select>
			</el-form-item>
			<el-form-item label="工序：" label-width="110px">
        <w-select-mulity
					v-model="procedureIds"
					:optionlist="procedureList"
					class="form-input"
				>
				</w-select-mulity>
			</el-form-item>
      <el-form-item label="产品类别：" label-width="110px">
        <w-select-mulity
					v-model="materialTypes"
					:optionlist="typeList"
					:optionProp="optionProp"
					class="form-input"
				>
				</w-select-mulity>
			</el-form-item>
			<el-form-item label="品项：" label-width="110px">
				<w-select-mulity
					v-model="materialIds"
					:optionlist="materialList"
					class="form-input"
				>
				</w-select-mulity>
			</el-form-item>
		</template>
		<template slot="tools">
			<el-button class="order-btn" type="primary" @click="onSearchClick">自动排程</el-button>
			<el-button class="order-btn" type="text"  @click="onResetClick">重置</el-button>
			<el-button type="primary" icon="el-icon-upload" @click="downloadSprintTestReport">导出排程图</el-button>
			<el-button type="primary" icon="el-icon-upload" @click="exportExcel">导出排程表</el-button>
		</template>
	</fx-list-filter>
</template>
<script>
export default {
	name: 'filterBar',
	props: {
		workshopList: {
			type: Array,
			default: () => {
				return []
			}
		},
		productionLineList: {
			type: Array,
			default: () => {
				return []
			}
		},
		procedureList: {
			type: Array,
			default: () => {
				return []
			}
		},
		materialList: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	data () {
		return {
			busDate: this.$fxUtils.setDate(new Date()),
			carRoomIds: '',
			productionLineIds: '',
			procedureIds: [],
			optionProp: {
				id: 'id',
				name: 'label',
				value: 'id',
				disabled: 'disabled'
			},
			typeList: [{
				id: 0,
				label: '在制品'
			}, {
				id: 1,
				label: '产成品'
			}],
			materialTypes: [],
			materialIds: [],
			autoQueryType: 1,
			autoQueryTypeList: [{
				id: 1,
				name: '产品维度'
			}, {
				id: 2,
				name: '排程维度'
			}]
		}
	},
	methods: {
		onSearchClick () {
			this.$emit('on-search', this.getFilterParams())
		},
		onResetClick () {
			this.carRoomIds = ''
			this.productionLineIds = ''
			this.procedureIds = []
			this.materialTypes = []
			this.materialIds = []
			this.autoQueryType = 1
			this.$emit('on-resetSearch')
		},
		getFilterParams () {
			const filterSearch = {
				busDate: this.busDate,
				autoQueryType: this.autoQueryType,
				carRoomId: this.carRoomIds,
				productionLineId: this.productionLineIds,
				procedureIds: this.procedureIds,
				materialTypes: this.materialTypes,
				materialIds: this.materialIds
			}
			const params = {}
			Object.keys(filterSearch).forEach(key => {
				if (filterSearch[key] !== '') {
					params[key] = filterSearch[key]
				}
			})
			return {
				...params
			}
		},
		downloadSprintTestReport () {
			this.$emit('downloadSprintTestReport')
			// this.getPdfFromHtml(this.$refs.sprintReport, '生产排程')
		},
		exportExcel () {
			this.$emit('exportExcel')
		},
		// 改变车间 给产线赋值
		changeCarRoom (val) {
			this.productionLineIds = ''
			this.procedureIds = []
			this.$emit('on-changeCarRoom', val)
		},
		// 改变产线 给工序赋值
		changeProductionLine (val) {
			this.procedureIds = []
			this.$emit('on-changeProdutionLine', val)
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.form-input {
	width: 170px
}
</style>
